<template>
  <div class="app-container">
    <el-tabs v-model="selectIndex" tab-position="left" @tab-click="tabClick">
      <el-tab-pane v-for="(item,index) in execs" :key="index" :label="item">
        <AgentView ref="tabView" :agent="item" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AgentView from './agents'
import { Execs } from '@/api/api'

export default {
  components: { AgentView },
  data() {
    return {
      tabPosition: 'left',
      execs: [],
      agents: [],
      selectIndex: '',
      isLoad: false
    }
  },
  created() {
    this.getExecs()
  },
  methods: {
    tabClick() {
      var index = Number.parseInt(this.selectIndex)
      if (this.execs.length > index) {
        this.$refs.tabView[index].getVersion(this.execs[index])
      }
    },
    getExecs() {
      var ts = this
      Execs().then((res) => {
        if (res.data) {
          ts.execs = res.data
          if (ts.execs.length > 0) {
            ts.selectIndex = '0'
            setTimeout(ts.tabClick, 1000)
          }
        }
      })
    }
  }
}
</script>
